<template>
  <div class="login m-25 bg-white p-6 w-100">
    <div class="container ">
      <!-- <el-input v-model="input" placeholder="请输入用户名" ></el-input>
      <el-input placeholder="请输入密码" v-model="input" show-password></el-input>
      <el-button type="primary" @click="toHome">登录</el-button> -->
      <div class="row">
        <div class="col-12 col-sm-9 col-md-7 col-lg-5 mr-25 pt-5">
					<div class="card mt-5">
						<div class="card-header bg-white">
							<h3 class="text-center mb-0 text-secondary">
								员工信息管理系统
							</h3>
						</div>
						<div class="card-body">
							<el-form ref="form" :model="form">
								<el-form-item>
									<el-input v-model="form.userName" 
									size="medium" prefix-icon="el-icon-user"
									placeholder="请输入用户名">
									</el-input>
								</el-form-item>
								<el-form-item>
									<el-input v-model="form.password" 
									size="medium" type="password" prefix-icon="el-icon-lock"
									maxlength="16"
									placeholder="请输入密码" show-password>
									</el-input>
								</el-form-item>
                <el-form-item>
									<el-input v-model="form.captcha" 
									size="medium" prefix-icon="el-icon-circle-check"
									placeholder="请输入验证码"  style="width: 55%;">
									</el-input>
									<div class="svg" style="display:inline-block" v-html="imgURL" @click="change()">
									</div>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" size="big"
									class="w-100" @click="toHome">
										登录
									</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
      return {
				imgURL:"",
        form:{
          userName:"",
          password:"",
          captcha:"",
        },
        rules:{
					userName:[
						{ required:true,message:"请输入账号",trigger:'blur' }
					],
					password:[
						{ required:true,message:"请输入密码",trigger:'blur' }
					],
          captcha:[
            { required:true,message:"请输入验证码",trigger:'blur'}
          ] 
				}
      }
    },
		name: 'loginIndex',
    methods:{
        toHome(){
					// const {username, password,idCode} = this.form;
					// (username && password && idCode) && this.$store.dispatch('user/userLogin',this.form)
					this.$refs.form.validate(async (valid) => {
						if(!valid) return
						const res = await axios.post('/oa-api/login',JSON.stringify(this.form))
						console.log(res);
						if(res.data.data.token) {
							this.$router.push("/home")
						}
					})
            // this.$router.push("/home")
				// 	if(this.form.username === 'admin' && this.form.password === '123456' && this.form.idCode !== ''){
        //      this.$router.push('/home')
        //         //  2.提示成功
        //         this.$message({
        //         showClose: true,
        //         message: '登录成功',
        //         type: 'success'
        //         });
        //  }else if(this.form.username === 'admin' && this.form.password === '123456' && this.form.idCode === '' ){
        //      this.$message({
        //         showClose: true,
        //         message: '验证码不能为空',
        //         type: 'error'
        //         });
        //  }else{
				// 	this.$message({
        //         showClose: true,
        //         message: '用户名和密码不能为空',
        //         type: 'error'
        //         });
				// }	 
      },
				
				async change() {
					const res = await this.axios.get("/oa-api/captcha");
					console.log(res);
					this.imgURL = res.data;
				},
				getDate() {
					const loading = this.$loading({
          lock: true,//lock的修改符--默认是false
          text: '正在拼命加载中',//显示在加载图标下方的加载文案
          spinner: 'el-icon-loading',//自定义加载图标类名
          background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
          target: document.querySelector('body')//loadin覆盖的dom元素节点
    });
    //成功回调函数停止加载
		setTimeout(() => {
					loading.close();
		}, 1800); }	
  },
		async created() {
					const res = await this.axios.get("/oa-api/captcha");
					// console.log(res.data);
					this.imgURL = res.data;
					this.getDate();
				}       
};
</script>

<style>
.login {
  color: white;
}
.login {
  display: flex;
  height: 100vh;
  width: 100%;
  background-size: cover;
  justify-content: flex-end;
  box-sizing: border-box;
  background-color: rgb(45,58,75);
  background-image: url("../../assets/login_bg.e599f954.png");
}
.row{
  display: flex;
  justify-content: flex-end;
	/* padding-left: 20px; */
}
h3{
	color: #277bea;
}
.card {
  margin-right: -60px;
}

</style>
